import React, { useState, useEffect } from "react";

function useCounter(initialCount, dependencies) {
  const [count, setCount] = useState(initialCount);
  const [pause, setPause] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
     !pause && setCount(count + 1)
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  }, [count,pause]);
  
  const reset = () =>{
      setCount(initialCount);
  }
  const toggle = () =>{
      setPause(!pause);
  }
  return [count, reset,toggle];
}

function TimerHook() {
  const [count, resetCount,toggle] = useCounter(10);
  const [count1, resetCount1,] = useCounter(100);
  return (
    <div>
      TimerHook
      <br />
      <strong>{count}</strong>
      <button onClick={resetCount}>回去吧</button>
      <button onClick={toggle}>停 懂？/那你就走！</button>
      <br />
      <strong>{count1}</strong>
      <button onClick={resetCount1}>回去吧</button>
    </div>
  );
}

export default TimerHook;
